<template>
  <footer>
    <p><span class="rotating"></span></p>
    <p class="text"><slot name="text"></slot></p>
    <p class="device"><slot name="device"></slot></p>
    <!-- <p class="info"><slot name="info"></slot></p> -->
    <a href="https://beian.miit.gov.cn/" target="_blank">{{ beiAn }}</a>
  </footer>
</template>

<script>
export default {
  name: 'HomeFooter',
  props: {
    beiAn: {
      type: String,
      default: '',
    },
  },
}
</script>

<style lang="stylus" scoped>
@import '~styles/theme.styl';
footer
  height: var(--footer-height)
  padding-top: 20px
  background rgba(0,0,0,0.03)
  // background-color: #828282
  color: #222
  text-align: center
  box-sizing: border-box
  .rotating
    display inline-block
    animation: rotating 3s infinite linear;
    &::before
      content: url('~assets/images/花.svg')
  .text
    margin-top 10px
    font-size: 14px
    background: -webkit-linear-gradient(left, #ffffff, #ff0000 6.25%, #ff7d00 12.5%, #ffff00 18.75%, #00ff00 25%, #00ffff 31.25%, #0000ff 37.5%, #ff00ff 43.75%, #ffff00 50%, #ff0000 56.25%, #ff7d00 62.5%, #ffff00 68.75%, #00ff00 75%, #00ffff 81.25%, #0000ff 87.5%, #ff00ff 93.75%, #ffff00 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 100%;
    animation: masked-animation 5s infinite linear;
  .device
    margin: 15px 0 5px 0
    text-align: center;
    font-size: 14px;
    color: #999;
  a
    margin-top: 10px
    font-size: 13px;
    color: #999;
    text-decoration none
@keyframes masked-animation
  0%
    background-position: 0 0
  100%
    background-position: -100%, 0
@keyframes rotating
  0%
    // transform: rotate(180deg);
  100%
    transform: rotate(360deg);
</style>
